<template>
    <div>
        <div style="display:flex;justify-content: center;margin-right: 10%">
            <el-input
                    style="width: 35%;margin-right: 10px"
                    prefix-icon="el-icon-search"
                    placeholder="默认展示部分用户，搜索用户名展示更多用户"
                    >
            </el-input>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </div>
        <div class="hr-container">
            <el-card class="box-card card info" v-for="(hr,index) in hrs" :key="index" >
                <div slot="header" class="clearfix">
                    <span>{{hr.name}}</span>
                    <el-button style="float: right; padding: 3px 0" icon="el-icon-delete" @click="deleteHr(hr.id)"></el-button>
                </div>
                <div class="img-contianer">
                    <img :src="hr.userface" :alt="hr.name" :title="hr.name" class="img-face">
                </div>
                <div class="info-container">
                    <p>用户名：{{hr.name}}</p>
                    <p>手机号码：{{hr.phone}}</p>
                    <p>地址：{{hr.address}}</p>
                    <p>用户状态：{{hr.name}}</p>
                </div>
            </el-card>
<!--            <el-card class="box-card card" ref="more" >-->
<!--                <div class="more-container">-->
<!--                    <i class="el-icon-circle-plus-outline"></i>-->
<!--                </div>-->
<!--            </el-card>-->

        </div>
    </div>

</template>

<script>
    export default {
        name: "SysHr",
        data(){
            return{
                hrs:[]
            }
        },
        mounted() {
            this.initHrs();
        },
        methods:{
            initHrs(){
                this.getRequest("/system/hr/").then(resp=>{
                    if (resp.data){
                        this.hrs = resp.data;
                    }
                })
            }
            ,deleteHr(id){
                this.deleteRequest("/system/hr/"+id).then(resp=>{
                    if (resp){
                        this.initHrs();
                    }
                })
            }

        }
    }
</script>

<style>
    .card{
        margin-top: 20px;
        width: 350px;
    }
    .hr-container{
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        justify-content: space-around;
    }
    .img-contianer{
        display: flex;
        justify-content: center;
    }
    .img-face{
        width: 100px;
        height: 100px;
        border-radius: 50px;
    }
    .more-container{
        height: 340px;
        display: flex;
        justify-content: center;

    }
    .more-container i{
        display: inline-block;
        font-size: 220px;
        margin-top: 60px;
        color: rgba(78, 77, 77, 0.33);
    }
</style>